<template>
  <el-dialog
    title="本表条件"
    width="800px"
    :show-close="true"
    :visible.sync="tableVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div style="height: 180px">
      <div style="margin-bottom: 8px" v-for="(item, index) in objArrValue" :key="index">
        <i class="el-icon-delete" style="margin-right: 4px" @click="btnTableConditionDel(item.id)"></i>
        <el-select v-if="item.zero" size="mini" style="width: 18%; margin-right: 4px" v-model="item.zero">
          <el-option
            v-for="it in tableConditionOptionsZero"
            :key="it.value"
            :value="it.value"
            :label="it.label"
          ></el-option>
        </el-select>
        <el-select disabled size="mini" style="width: 18%; margin-right: 4px" v-model="item.first">
          <el-option
            v-for="it in tableConditionOptions"
            :key="it.id"
            :value="it.variable"
            :label="it.variableName"
          ></el-option>
        </el-select>
        <el-select size="mini" style="width: 13%; margin-right: 4px" v-model="item.firstSelect">
          <el-option
            v-for="it in item.tableConditionOptionsTwo"
            :key="it.value"
            :value="it.value"
            :label="it.label"
          ></el-option>
        </el-select>
        <template v-if="item.firstSelect !== '为空' && item.firstSelect !== '不为空'">
          <el-select size="mini" style="width: 18%; margin-right: 4px" v-model="item.secondSelect">
            <el-option
              v-for="it in item.tableConditionOptionsThree"
              :key="it.value"
              :value="it.value"
              :label="it.label"
            ></el-option>
          </el-select>
          <template v-if="item.secondSelect === '与变量比较'">
            <el-select size="mini" style="width: 18%; margin-right: 4px" v-model="item.second">
              <el-option
                v-for="it in tableConditionOptions"
                :key="it.id"
                :value="it.variable"
                :label="it.variableName"
              ></el-option>
            </el-select>
          </template>
          <template v-if="item.secondSelect === '与具体值比较'">
            <el-input size="mini" style="width: 18%; margin-right: 4px" v-model="item.third"></el-input>
            <el-select size="mini" style="width: 13%; margin-right: 4px" v-model="item.fourth">
              <el-option label="数值" value="数值"></el-option>
              <el-option label="字符" value="字符"></el-option>
            </el-select>
          </template>
        </template>
      </div>
      <div style="margin-bottom: 8px">
        <el-select style="margin-right: 4px; width: 20%" size="mini" v-model="tableConditionSelectVal">
          <el-option
            v-for="it in tableConditionOptions"
            :key="it.id"
            :value="it.variable"
            :label="it.variableName"
          ></el-option>
        </el-select>
        <el-button size="mini" type="primary" @click="btnTableConditionAddCon()">增加条件</el-button>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSave">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapActions } from 'vuex'
import {
  btnTableConditionAddConPublic,
  btnTableConditionConfirmPublic,
  checkPropertiesNotEmpty,
} from '@/utils/modules/tableConLogic.js'
import { cloneDeep } from 'lodash-es'

export default {
  props: {
    rowData: Object,
    tableVisible: Boolean,
    actionType: String,
  },
  data() {
    return {
      // 本表下拉框开始💭🏀
      // 本表条件下拉框val
      tableConditionSelectVal: '',
      // 下拉框选项
      tableConditionOptions: [],
      tableConditionOptionsEnums: {},
      // 等于大于小于的那个下拉框选项Enums
      tableConditionOptionsTwoEnums: {
        '==': '等于',
        '!=': '不等于',
        为空: '为空',
        不为空: '不为空',
        '>': '大于',
        '<': '小于',
        '>=': '大于等于',
        '<=': '小于等于',
      },
      // 下拉框选项
      tableConditionOptionsZero: [
        { label: '并且', value: '&&' },
        { label: '或者', value: '||' },
      ],
      tableConditionOptionsZeroEnums: {
        '&&': '并且',
        '||': '或者',
      },
      // 多层渲染数据
      objArrValue: [],
      // 本表下拉修改id
      // 本表条件当前表名value
      // 本表条件当前表名name
      tableConId: '',
      tableConTableName: '',
      tableConTableNameName: '',
      searchParams: {},
    }
  },

  watch: {
    tableVisible(val) {
      if (val) {
        this.btnTableConditionOptions(this.rowData)
      }
    },
  },

  mounted() {
    const databaseInfo = JSON.parse(localStorage.getItem('sys-database-info')) || {}
    this.searchParams = {
      projectId: localStorage.getItem('sys-project-id') || '',
      ...databaseInfo,
    }
  },

  methods: {
    ...mapActions('verificationRule', ['getTableConditionOptionsAPI']),

    handleClose() {
      this.objArrValue = []
      this.tableConditionSelectVal = ''
      this.$emit('handleTableConditionCancel')
    },

    // 本表条件开始💭🏀
    // 6. 点击确认💭
    async handleSave() {
      // 1. 进行非空校验
      const arr = cloneDeep(this.objArrValue)
      arr.forEach(item => {
        if (item.firstSelect === '为空' || item.firstSelect === '不为空') {
          delete item.second
          delete item.third
          delete item.fourth
        } else {
          if (item.secondSelect === '与变量比较') {
            delete item.third
            delete item.fourth
          } else if (item.secondSelect === '与具体值比较') {
            delete item.second
          } else if (item.secondSelect === '未来日期') {
            delete item.second
            delete item.third
            delete item.fourth
          }
        }
      })
      const isNotEmpty = checkPropertiesNotEmpty(arr)
      // 2. 拼接字段
      if (isNotEmpty) {
        const { paramsString, paramsStringTwo } = btnTableConditionConfirmPublic(
          this.objArrValue,
          this.tableConTableName,
          this.tableConditionOptionsZeroEnums,
          this.tableConTableNameName,
          this.tableConditionOptionsEnums,
          this.tableConditionOptionsTwoEnums
        )
        // 2.3三个参数
        const data = {
          id: this.tableConId,
          thisTable: paramsString,
          thisTableCn: paramsStringTwo,
          thisTableWeb: {
            web: JSON.stringify(this.objArrValue),
          },
        }
        const res = await this.$store.dispatch(`verificationRule/${this.actionType}`, { data })
        if (res.code === 200) {
          this.objArrValue = []
          this.tableConditionSelectVal = ''
          this.$emit('handleTableConditionCancel', 'refresh')
        }
      } else {
        this.$message.warning('请填写完整！')
      }
    },

    // 4. 点击本表条件的删除
    btnTableConditionDel(id) {
      this.objArrValue = this.objArrValue.filter(item => {
        return item.id !== id
      })
    },
    // 3. 💭💭💭点击增加条件
    btnTableConditionAddCon() {
      if (this.tableConditionSelectVal) {
        const objArrValue = btnTableConditionAddConPublic(
          this.tableConditionSelectVal,
          this.tableConditionOptions,
          this.objArrValue
        )
        this.objArrValue = objArrValue
      } else {
        // 没有选择情况
        this.$message.warning('请选择字段！')
      }
    },
    // 2. 点击叉号退出
    // btnTableConditionQuit() {
    //   this.$refs.tablePartRef.click()
    // },
    // 1. 点击本表条件的省略按钮
    async btnTableConditionOptions(row) {
      // a. 记录点击行的数据
      this.tableConTableName = row.surface
      this.tableConTableNameName = row.surfaceName
      this.tableConId = row.id
      // b. 首个下拉框请求
      const params = {
        ...this.searchParams,
        surface: row.surface,
      }
      // c. 处理请求结果
      const res = await this.getTableConditionOptionsAPI({ params })
      this.tableConditionOptions = res.data
      res.data.forEach(item => {
        this.tableConditionOptionsEnums[item.variable] = [item.variableName]
      })
      // 💭设置回显
      if (row.thisTableWeb) {
        this.objArrValue = JSON.parse(row.thisTableWeb.web)
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
